<template>
  <div class="container">
    <!-- <dv-border-box-8 > dv-border-box 1-13-->
    <dv-border-box-11 title="智慧园区" style="height:900px;width:100%">
      <!-- <dv-decoration-1 :color="['red', 'green']" /> -->
      <!-- <dv-decoration-6 style="width:300px;height:30px;" /> -->
      <div style="display: flex;justify-content: space-between;flex-wrap:wrap; padding:0 50px;padding-top:150px;">
        <dv-active-ring-chart :config="config1" style="width:300px;height:300px" />
        <dv-capsule-chart :config="config2" style="width:300px;height:200px" />
        <dv-water-level-pond :config="config3" style="width:150px;height:200px" />
        <dv-scroll-ranking-board :config="config4" style="width:500px;height:300px" />
        <dv-decoration-9 style="width:150px;height:150px;color:#fff">66%</dv-decoration-9>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script>

export default {
  
  name: 'dvcomponent',
  data(){
    return{
      config1:{
        radius: '40%',
        activeRadius: '45%',
        digitalFlopStyle: {
          fontSize: 20
        },
        showOriginValue: true,
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ]
      },
      config2: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 123
          },
          {
            name: '漯河',
            value: 98
          },
          {
            name: '郑州',
            value: 75
          },
          {
            name: '西峡',
            value: 66
          },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '单位',
        showValue: true
      },
      config3:{
        data: [66]
      },
      config4: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ]
      }
    }
    
  }
}
</script>

<style>
</style>
